<template>
  <div class="main_background">
    <ul>
      <li class="video_item" v-for="item in BackgroundVideoUrl" :key="item.url">
        <video preload="atuo" autoplay muted loop toplay >
          <source :src="item.url" type="video/mp4"></source>
        </video>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { gsap } from 'gsap'
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger)
export default defineComponent({
  async setup(){
    const data = reactive({
      BackgroundVideoUrl: [
        {url: "https://resource-cdn.obsbothk.com/video/sea.mp4"},
        {url: "https://resource-cdn.obsbothk.com/video/medium.mp4"},
        {url: "https://resource-cdn.obsbothk.com/video/168787-839864519.mp4"},
        {url: "https://resource-cdn.obsbothk.com/video/188057-881538748.mp4"},
        {url: "https://resource-cdn.obsbothk.com/video/188861-883827797.mp4"},
        {url: "https://resource-cdn.obsbothk.com/video/cloud.mp4"},
        {url: "https://resource-cdn.obsbothk.com/video/161045-822582085_large.mp4"},
        {url: "https://resource-cdn.obsbothk.com/video/202982-919365848_large.mp4"},
        {url: "https://resource-cdn.obsbothk.com/video/188021-881528788_large.mp4"},
        {url: "https://resource-cdn.obsbothk.com/video/175876-854230219_large.mp4"}
      ],
      timer: ref(),
      i: ref(0)
    })

    const GSAP = gsap.timeline({ delay: 0.8});


    const ExchangeVideo = async() => {
      const videoItems = document.querySelectorAll('.video_item');
      if ( videoItems.length > 0) {
        GSAP.to(videoItems, { opacity: 0, ease: "power2.out", duration: 1 }, 'start')
        GSAP.to(videoItems[data.i], { opacity: 1, ease: "power2.in", duration: 1 }, 'start')
        setInterval(() => {
          GSAP.to(videoItems[data.i], { opacity: 0, ease: "power2.out", duration: 2 }, 'start')
          data.i = (data.i + 1) % videoItems.length;
          GSAP.to(videoItems[data.i], { opacity: 1, ease: "power2.in", duration: 1 }, 'start')
        }, 10000);


      }
    }



    onMounted(() => {
      ExchangeVideo()
    })



    return{
      ...toRefs(data)
    }

  }
})



</script>



<style scoped>
.main_background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  z-index: -1;
}


.main_background ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



.main_background video {
  width: 100%;
  height: 100%;
  transition: 1s;
  object-fit: cover;
  transition: opacity 0.5s ease-in-out;
}


</style>